<template>
    <view class="header">
        <image class="img-title" src="../../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('information.shiming.cert') }}</view>
    </view>
    <view class="main">
        <view class="form">
            <view class="realname form-item">
                <input class="realname-input" v-model="form.realName" :placeholder="$t('information.shiming.rlplacehold')"
                    type="text">
                <text class="label">{{ $t('information.shiming.realname') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.idCard" :placeholder="$t('information.shiming.placehold')"
                    type="text">
                <text class="label">{{ $t('information.shiming.idCard') }}</text>
            </view>
        </view>
        <!-- submit -->
        <view class="logout" @click="submit()">
            {{ $t('information.shiming.submit') }}
        </view>
    </view>
    <view class="footer">
        <view class="rules-title">{{ $t('information.shiming.rules') }}</view>
        <view class="rules-item">{{ $t('information.shiming.rules1') }}</view>
        <view class="rules-item">{{ $t('information.shiming.rules2') }}</view>
        <view class="rules-item">{{ $t('information.shiming.rules3') }}</view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { requestApi } from '@/api';
import { toast } from '@/utils/storage';

const form = reactive({
    realName: 'justin',
    idCard: 'A123456789',
    img1key: 'asd',
    img2key: 'asd',
    img3key: 'ads',
})

async function submit() {
    const { msg, status } = await requestApi.auth(form)
    if (status == 0) {
        toast(msg)
        router()
    } else {
        toast(msg)
    }
}










function router() {
    uni.navigateTo({ url: '/pages/my-service/certification/result' })
}
// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
  // #ifndef H5
  margin-top: 88rpx;
  // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    margin: 59rpx 44rpx 0rpx 40rpx;

    .form {

        .form-item {
            background-color: #20212A;
            position: relative;
            margin-bottom: 49rpx;
            height: 90rpx;
            border-radius: 28rpx;

            input {
                height: 100%;
                padding-left: 176rpx;
                color: #C7C7C7;
            }

            .label {
                color: #fff;
                position: absolute;
                top: 50%;
                left: 24rpx;
                transform: translateY(-50%);
            }
        }

        .realname {}
    }

    .logout {
        background-color: #2D7DFC;
        width: 500rpx;
        height: 96rpx;
        margin: 69rpx auto 73rpx;
        line-height: 96rpx;
        text-align: center;
        border-radius: 204rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

.footer {
    width: 621rpx;
    margin: 348rpx 64.5rpx 0rpx;
    color: #C7C7C7;
    letter-spacing: 2rpx;

    .rules-title {
        margin-bottom: 38rpx;
        font-size: 28rpx;
    }

    .rules-item {
        margin-bottom: 33rpx;
    }
}
</style>